<template>
    <div class="song-list">
        <ul>
            <li @click="selectItem(index)" v-for="(item,index) in songs" class="song">
                <div v-if="rank" class="rank">{{index+1}}</div>
                <div class="content">
                    <h2 class="title">{{item.name}}</h2>
                    <p>{{getDisc(item)}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  props: {
    songs: {
      type: Array,
      default: []
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getDisc(song) {
      return `${song.singer} - ${song.album}`
    },
    selectItem(index) {
      this.$emit('select', index)
    }
  }

}
</script>

<style lang="scss" scoped>

.song-list{
  width: 100%;
    ul{
        margin: 0;
        list-style: none;
        padding: 0;
        padding: 3% 0;
        .song{
          display:flex;
          height: 60px;
          padding: 2% 0;
          .rank{
            width: 40px;
            text-align: right;
            line-height: 60px;
            font-size: 20px;
            font-weight: 600;
            color: rgb(250, 49, 92);
          }
            .content{
                margin-left: 40px;
                .title{
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: 400;
                    white-space: nowrap;
                }
                p{
                  padding-top: 3%;
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 0.6);
                    white-space: nowrap;

                }
            }
        }
    }

}

</style>
